<template>
  <view class="uni-swiper">
    <swiper class="swiper" :autoplay="autoplay" interval="100000" duration="500"
      :current="current" @change="currentChange">
      <swiper-item class="swiper-item" v-for="item in list" :key="item.goods_id"
        @click="clickSwiperItem(item)">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
    <view class="indicator-dots">
      <view class="dot-item" :class="{ isActive: index === current }"
        v-for="(item, index) in list.length" :key="index"></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'u-swiper',
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        current: 0,
        autoplay: true
      };
    },
    methods: {
      currentChange(e) {
        this.current = e.detail.current;
      },
      clickSwiperItem(item) {
        this.$emit('clickSwiperItem', item)
      }
    }
  };
</script>

<style lang="scss">
  .uni-swiper {
    width: 100%;
    height: 100%;
    position: relative;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        width: 100%;
        height: 100%;

        navigator {
          width: 100%;
          height: 100%;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .indicator-dots {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 999;
      width: 100%;
      height: 40upx;
      display: flex;
      align-items: center;
      justify-content: center;

      .dot-item {
        width: 8upx;
        height: 8upx;
        background-color: rgba(0, 0, 0, 0.3);
        margin: 0 10upx;
        border-radius: 4upx;
      }

      .isActive {
        width: 30upx;
        background-color: pink;
      }
    }
  }
</style>
